<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
//CAT_NOTE https://sites.google.com/site/catwip Version 7 at the time of this note.
//CAT_NOTE This file is on CATLAP C:\BitNami\apache2\htdocs\jsfile\simple\index.html
//CAT_NOTE This file requries upload.php on CATLAP C:\BitNami\apache2\htdocs\jsfile\simple\upload.php
//CAT_NOTE upload.php is only this <?php print_r($_FILES); print_r($_POST); ?>
//CAT_NOTE The point of all this is to see messages to and from client / server.  I used fiddler to see the traffic.
// FIRST.... let the darn page load then go let the javascript mess with the DOM.
window.addEventListener("load", function() {
    // handle image preview
    var input      = document.getElementById("input_file_name_id");
    var img        = document.getElementById("img");
    var previewBtn = document.getElementById("preview");
	// While adding Event Listers dynamically would help separate the view layout from user control W3 and IE use different methods
/*    
	//W3... this worked on firefox
	previewBtn.addEventListener("click", function() {
		alert("Hello Chris");
	}, false);
	//IE... I didn't test this at all need to go look it up at some other time
	previewBtn.attachEvent("click", function() {
		alert("Hello Chris");
	}, false);
*/
    // handle file upload
//    var form      = document.getElementsByTagName("form")[0];
    var uploadBtn = document.getElementById("upload");
 /*   uploadBtn.addEventListener("click", function() {
        alert("Hello Chris");
    }, false);
*/
}, false);
function uploadclick() { 
	alert("Upload was clicked");
	//Setup stuff for the multipart boundary
	var CRLF  = "\r\n";
	var boundary = "CAT-------------------CAT" + (new Date).getTime();
	//Formulate the packet
        var xhr      = new XMLHttpRequest;
       xhr.open("POST", "pastehere.php", true);
	//Show what the server sends back.
	xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
                alert(xhr.responseText);
            }
        };
 	//Make up a test XML... could have used plain text too...
	// var fileCATXML = '<?xml version="1.0" encoding="utf-8"?>' + CRLF + '<title>CAT TEST</title>';
//	var stringCopyCATText;
	var stringCopyCATText = document.getElementById("CopyCATTextbox");
	alert("stringCopyCATText is: " + stringCopyCATText.value);
        var contentType = "multipart/form-data; boundary=" + boundary;
	var contentDump = "";
	//The -- are important and nasty... need the -- at the end to end atleast using the apache php bitnami setup I was using
	contentDump += '--' + boundary + CRLF + 'Content-Disposition: form-data; name="SomeCrap"' + CRLF + CRLF + 'crapvalue1' + CRLF;
	contentDump += '--' + boundary + CRLF + 'Content-Disposition: form-data; name="thefilename"; filename="WebPaste.txt"' + CRLF + 'Content-Type: text/xml' + CRLF + CRLF + stringCopyCATText.value + CRLF;
	contentDump += '--' + boundary + CRLF + 'Content-Disposition: form-data; name="hiddenname1"' + CRLF + CRLF + 'hiddenValue1' + CRLF;
        contentDump += '--' + boundary + '--' + CRLF; //-- for THE END
	//And the headers... I was having issues due to the -- but I experimented with various headers which did not make a difference but nice to know how to mess with them
	xhr.setRequestHeader("Content-Type", contentType);
//	xhr.setRequestHeader("Accept", "application/x-ms-application, image/jpeg, application/xaml+xml, image/gif, image/pjpeg, application/x-ms-xbap, application/x-shockwave-flash, */*");
//	xhr.setRequestHeader("Accept-Language", "en-US");
        // finally send the request as binary data
        // xhr.sendAsBinary();
	// or just send
	xhr.send(contentDump);
};
</script>
</head>
<body>
<input id="CopyCATTextbox" type="text" /><input type='button' onclick='uploadclick()' value='CopyCAT THIS' /></br>
</body>
</html>
